<!--  -->
<template>
  <div class="app-container" id="user">
    <!-- 查询 -->
    <div class="filter-container">
      <!-- clearable 清空输入框 -->
      <!-- Loading 按钮加载状态属性 -->
      <el-input placeholder="请输入用户名" v-model="listQuery.username" clearable class="search-item"></el-input>
      <el-input placeholder="请输入手机号" v-model="listQuery.mobile" clearable class="search-item"></el-input>
      <el-button type="primary" :loading="searchLoading" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <!-- border 添加边框-->
    <!-- sortable  排序-->
    <!-- align="center" 表格内容居中 -->
    <el-table :data="tableData" style="width: 100%" border :header-cell-style="{ 'text-align': 'center' }"
      :default-sort="{ prop: 'id', order: 'descending' }" :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="id" label="用户ID" sortable width="180">
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="180">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号码">
      </el-table-column>
      <el-table-column prop="gender" label="性别">
        <template slot-scope="scope">
          {{genderDic[scope.row.gender]}}
        </template>
      </el-table-column>
      <el-table-column prop="birthday" label="生日">
      </el-table-column>
      <el-table-column prop="userLevel" label="用户等级">
        <template slot-scope="scope">
          {{userLevelDic[scope.row.userLevel]}}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          {{statusDic[scope.row.status]}}
        </template>
      </el-table-column>
    </el-table>
    <div class="footerPage">
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList"></pagination>
      <!-- <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="listQuery.Page" :page-sizes="[2, 4, 6, 8]" :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination> -->
    </div>
  </div>
</template>
<script >
import { fatchList } from '@/api/user/user'
import Pagination from '../user/Pagination'
export default {
  name: 'User',
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 2,
        username: '',
        mobile: '',
        sort: 'add_time',
        order: 'desc'
      },
      total: 0,
      currentPage: '',
      searchLoading: false,
      tableData: [],
      //性别
      genderDic:['未知','男','女'],
      userLevelDic:['普通用户','VIP用户','高级VIP用户'],
      statusDic:['可用','禁用','注销']
    }
  },
  props: [],
  components: {
    Pagination
  },
  created() {
    // 数据初始化
    this.getList();
  },
  mounted() {
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.listQuery.page = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.listQuery.page = val;
      this.getList();
    },
    getList() {
      fatchList(this.listQuery).then(res => {
        console.log(res);
        this.tableData = [];
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    }
  }
};
</script>
<style>
.filter-container {
  width: 45%;
  display: flex;
  float: right;
  /* justify-content: space-between;
    align-items: center; */
  margin: 12px;
  grid-column-gap: 10px;
}

.footerPage {
  margin: 20px;
  float: right;
}
</style>
<style scoped>

#user.search-item {
  width: 200px;
}
</style>